<!-- 个人中心 -->
<template>
  <div>
    <div class="basePageBox">
      <UserArea></UserArea>
      <div class="contentArea">
        <div class="areaLeft">
          <FilterArea ref="filterArea"></FilterArea>
        </div>
        <div class="areaRgt">
          <div class="areaDiscuss">
            <div class="title">我的预约</div>
            <div class="noCourse" v-if="!cardData.length">
              暂无预约直播，去<span @click="toRouter('/training')">培训</span
              >看看吧。
            </div>
            <div
              class="cardItem"
              v-for="(item, index) in cardData"
              :key="'card' + index"
            >
              <div class="cardItemTop">
                <div
                  class="liveSatus"
                  :class="{
                    noStart: item.status === 'NO_START',
                    statusEnd: item.status === 'END',
                  }"
                >
                  <div></div>
                  {{
                    item.status === 'NO_START'
                      ? formatDate(item.beginTime)
                      : statusArr[item.status].txt
                  }}
                </div>
                <div style="flex: 1"></div>
              </div>
              <div class="courseCard" @click="toDetails(item.objectId)">
                <div class="cardBanner">
                  <img
                    class="cardImg"
                    :src="$getImageUrl(item.originImg)"
                    alt=""
                    srcset=""
                  />
                </div>
                <div class="cardInfo">
                  <div class="cardTitle moreHidden">
                    {{ item.name }}
                  </div>
                  <div class="cardOther">
                    <div class="lecturer">
                      讲师：{{ item.promoter || '无' }}
                    </div>
                    <div class="booking">{{ item.joins || 0 }}人学习</div>
                  </div>
                  <CustomButton
                    v-if="item.status === 'START'"
                    class="customButton"
                    type="primary"
                    plain
                  >
                    进入直播间
                  </CustomButton>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FilterArea from './components/FilterArea.vue';
import UserArea from './components/UserArea.vue';
import CustomButton from '@/components/CustomButton.vue';
import { selectMyJoinedTrain } from '@/api/training';
export default {
  name: 'Personal',
  components: { UserArea, FilterArea, CustomButton },
  data() {
    return {
      cardData: [],
      statusArr: {
        NO_START: {
          txt: '未开始',
        },
        START: {
          txt: '直播中',
        },
        END: {
          txt: '已结束',
        },
      },
    };
  },
  mounted() {
    this.selectMyJoinedTrainFn();
  },
  methods: {
    // 获取预约的最新3条培训
    async selectMyJoinedTrainFn() {
      try {
        const params = {};
        const resData = await selectMyJoinedTrain(params);
        this.cardData = resData;
      } catch (error) {
        console.error(error);
      }
    },
    toRouter(url) {
      this.$router.push(url);
    },
    formatDate(value) {
      return this.$dayjs(value).format('MM月DD日 HH:mm');
    },
    toDetails(objectId) {
      this.$router.push(`/trainingDetails?id=${objectId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.contentArea {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-bottom: 32px;
  .areaLeft {
    width: 1026px;
  }

  .areaRgt {
    width: 326px;
    padding-top: 52px;

    .areaDiscuss {
      width: 100%;
      background: #fff;
      border-radius: 8px;
      box-shadow: $box-shadow;
      padding: 16px;
      box-sizing: border-box;

      .title {
        font-size: 16px;
        font-weight: 600;
        line-height: 23px;
        color: $text-title-color;
      }
      .noCourse {
        width: 100%;
        text-align: center;
        padding: 84px 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        span {
          color: $primary-color;
          text-decoration: underline;
          margin: 0 2px;
          cursor: pointer;
        }
      }

      .cardItem {
      }

      .cardItemTop {
        display: flex;
      }

      .liveSatus {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        line-height: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 18px;
        margin-bottom: 15px;
        background: $primary-color;

        div {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #fff;
          margin-right: 4px;
        }
      }

      .noStart {
        color: $text-color-secondary;
        background: #f0f0f0;
        div {
          background: $text-color-secondary;
        }
      }

      .statusEnd {
        background: $text-color-secondary;
      }

      .courseCard {
        width: 100%;
        border-radius: 8px;
        background: #fff;
        box-shadow: $box-shadow;
        cursor: pointer;

        .cardBanner {
          width: 100%;
          height: 176px;
          position: relative;
          background: #fff;
          overflow: hidden;
          display: flex;
          align-items: center;
          border-radius: 8px 8px 0 0;
          .cardImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .cardInfo {
          padding: 12px 16px 16px;
          .customButton {
            width: 100%;
            margin-top: 17px;
          }
          .cardTitle {
            width: 100%;
            height: 42px;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            color: $text-title-color;
            -webkit-line-clamp: 2;
          }
          .cardOther {
            display: flex;
            align-items: center;
            margin-top: 12px;
            justify-content: space-between;
            .lecturer {
              height: 18px;
              line-height: 18px;
              font-size: 12px;
              font-weight: 400;
              color: $text-color;
            }
            .booking {
              color: $text-color-secondary;
              font-size: 12px;
              font-weight: 400;
              line-height: 18px;
            }
          }
        }
      }
    }
  }
}
</style>
